<template>
  <view class="content_box">
    <view class="u-flex u-col-center wrapper-box">
      <view class="scroll-box" style="background-color: #f6f6f6">
        <scroll-view
          class="left u-flex-col u-col-center"
          enable-back-to-top
          scroll-y
        >
          <view
            class="type-list u-ellipsis-1"
            :class="{ 'list-active': listId === index }"
            v-for="(item, index) in categoryData"
            :key="index"
            @tap="onType(index, item.categoryId)"
          >
            <view
              class="line"
              :class="{ 'line-active': listId === index }"
            ></view>
            {{ item.categoryName }}
          </view>
          <view class="hack-tabbar"></view>
        </scroll-view>
      </view>
      <view class="scroll-view">
        <scroll-view
          @scrolltolower="loadMore"
          scroll-y
          class="scroll-box"
          enable-back-to-top
          scroll-with-animation
        >
          <view class="right" v-if="goodsList.length">
            <image
              class="type-img"
              v-if="goodsList[0].productMainPic"
              :src="goodsList[0].productMainPic"
              mode="aspectFill"
            ></image>
            <view class="item-list">
              <view class="item-box u-flex">
                <view
                  class="u-flex-col u-col-center goods-item"
                  style="align-items: start"
                  @tap="jump(goods.id)"
                  v-for="(goods, index1) in goodsList"
                  :key="goods.id"
                >
                  <image
                    class="item-img"
                    lazy-load
                    :src="goods.productMainPic"
                    mode="aspectFill"
                  ></image>
                  <text class="item-title u-ellipsis-1">{{
                    goods.productName
                  }}</text>
                  <view class="item-price">
                    {{ goods.discountPrice }}
                    <text class="no_price">{{ goods.oriPrice }}</text>
                  </view>
                </view>
              </view>
            </view>
            <i-more
              v-if="!isEmpty"
              :status="loadStatus"
            />
            <view class="hack-tabbar"></view>
          </view>
          <!-- 缺省页 -->
          <i-notData v-if="isEmpty"></i-notData>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, getCurrentInstance } from "vue";
import { getProductList, getCategoryList } from "../../api/index";
import { onPullDownRefresh } from "@dcloudio/uni-app";

interface Category {
  categoryId: number;
  categoryName: string;
}

interface Goods {
  id: number;
  productMainPic: string;
  productName: string;
  discountPrice: number | string;
  oriPrice: number | string;
}

const props = defineProps<{
  categoryStyleId?: number;
}>();

const listId = ref<number>(0);
const categoryData = ref<Category[]>([]);
const categoryID = ref<number>(0);
const isEmpty = ref<boolean>(false);
const currentPage = ref<number>(1);
const lastPage = ref<number>(1);
const loadStatus = ref<"loadmore" | "loading" | "nomore">("loadmore");
const goodsList = ref<Goods[]>([]);

const { proxy } = getCurrentInstance() as any;

const getCategory = async () => {
  try {
    const res = await getCategoryList({
      id: props.categoryStyleId ?? 0,
    });
    if (res.code === 200) {
      categoryData.value = res.data;
      categoryID.value = res.data[0]?.categoryId ?? 0;
      await getGoodsList();
    }
  } catch (e) {
    // handle error
  }
};

const getGoodsList = async () => {
  uni.showLoading({
    title: "加载中...",
    mask: true,
  });
  try {
    const res = await getProductList({
      categoryId: categoryID.value,
      ypageNum: currentPage.value,
      productName: "",
      ypageSize: 15,
    });
    if (res.code === 200) {
      goodsList.value = goodsList.value.concat(res.rows);
      isEmpty.value = goodsList.value.length === 0;
      lastPage.value = res.total;
      loadStatus.value =
        goodsList.value.length < lastPage.value ? "loadmore" : "nomore";
    }
    uni.hideLoading();
  } catch (e) {
    uni.hideLoading();
    // handle error
  }
};

const loadMore = async () => {
  if (goodsList.value.length < lastPage.value) {
    currentPage.value += 1;
    await getGoodsList();
  }
};

const onType = async (index: number, id: number) => {
  listId.value = index;
  categoryID.value = id;
  goodsList.value = [];
  currentPage.value = 1;
  await getGoodsList();
};

const jump = (id: number) => {
  uni.navigateTo({
    url: `/pages/views/goodsDetail?id=${id}`,
    // query: params,
  });
  // proxy.$Router.push({
  //   path,
  //   query: params,
  // });
};

onMounted(() => {
  getCategory();
});

onPullDownRefresh(()=> {
  goodsList.value = [];
  currentPage.value = 1;
  getGoodsList();
  setTimeout(() => {
    uni.stopPullDownRefresh();
  }, 1000);
}) 
</script>

<style lang="scss">
.hack-tabbar {
  height: calc(100rpx + env(safe-area-inset-bottom) / 2);
  width: 100%;
}

.content_box {
  margin-top: 1upx;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: calc(100vh - 98px - env(safe-area-inset-bottom));
  border-top: 1px solid #f3f4f5;
}

.wrapper-box {
  flex: 1;
  margin-top: 1upx;
  height: 100%;
}

.scroll-box {
  height: 100%;
  flex: 1;
  background: #fff;
}

.left {
  width: 200upx;
  height: 100%;
  flex: 1;
  transition: all 0.3s ease;

  .list-active {
    background: #fff;
    color: #333333 !important;
    font-weight: bold !important;

  }

  .line-active {
    background: #ff5800;
  transition: all 0.3s ease;

  }

  .type-list {
    height: 84upx;
    position: relative;
    width: 200rpx;
    padding-left: 16rpx;
    line-height: 84rpx;
    font-size: 28upx;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);

    .line {
      width: 10upx;
      height: 100%;
      position: absolute;
      left: 0;
    }
  }
}
.scroll-view {
  height: 100%;
  width: 100%;
  @include flexC;
}

.right {
  padding: 0 30upx;
  flex: 1;
  height: 100%;

  .type-img {
    width: 505rpx;
    height: 150rpx;
    background: #ccc;
    margin: 20rpx 0;
    border-radius: 10rpx;
  }

  .item-list {
    .type-box {
      height: 84rpx;

      .type-title {
        font-size: 28rpx;
        font-weight: bold;
      }

      .more {
        font-size: 26rpx;
        color: #999;
      }
    }

    .item-box {
      flex-wrap: wrap;
      width: 504rpx;

      .goods-item {
        margin-right: 12rpx;
        margin-bottom: 12rpx;
        background: #ffffff;
        box-shadow: 0px 0px 20rpx 4rpx rgba(199, 199, 199, 0.22);
        border-radius: 10rpx;
        width: 66vw;

        &:nth-child(2n) {
          margin-right: 0;
        }

        .item-img {
          width: 66vw;
          height: 246rpx;
          border-radius: 10rpx 10rpx 0px 0px;
          background: #f5f5f5;
        }

        .item-title {
          font-size: 24rpx;
          font-weight: 700;
          line-height: 24rpx;
          margin-top: 10rpx;
          width: 200rpx;
          text-align: left;
          margin: 20rpx;
        }

        .item-price {
          font-size: 28rpx;
          font-weight: 500;
          color: #ff3000;
          text-align: left;
          // width: 200rpx;
          white-space: nowrap;
          margin: 0 20rpx 20rpx;

          &::before {
            content: "￥";
            font-size: 22rpx;
          }
        }
      }
    }
  }
}

.no_price {
  display: inline-block;
  margin-left: 12rpx;
  color: #666;
  font-size: 24rpx;
  text-decoration: line-through;
}
.u-flex {
  display: flex;
}
.u-flex-col {
  flex-direction: column;
}
.u-col-center {
  align-items: center;
}
.u-row-center {
  justify-content: center;
}
.u-ellipsis-1 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
